<template>
  <div class="search">
    <f-form ref="form" :action="api.order" :form-key="this.formItem.orderId">
      <a-divider orientation="left">订单金额</a-divider>
      <f-form-item label="订单号" name="orderNo" :value="formItem.orderNo" :disabled="true"/>
      <f-form-item label="商品数量" name="productCount" :value="formItem.productCount" :disabled="true"/>
      <f-form-item label="订单金额" name="totalAmount" :value="formItem.totalAmount" :disabled="true"/>
      <f-form-item label="优惠金额" name="couponAmount" :value="formItem.couponAmount" :disabled="true"/>
      <f-form-item label="折扣金额" name="discountAmount"  :value="formItem.discountAmount"/>
      <f-form-item label="运费" name="freightAmount" :value="formItem.freightAmount" :disabled="true"/>
      <f-form-item label="应付金额" name="payAmount" :value="formItem.payAmount" :disabled="true"/>
      <a-divider orientation="left">订单明细</a-divider>

      <a-table :columns="innerColumns" :dataSource="orderDetailsData" :pagination="false" style="padding: 2px;border: none" size="middle" :bordered="false">
           <span slot="productImages" slot-scope="text, record, index">
          <img v-lazy="record.productImages" v-viewer class="radius-img">
        </span>
        <span slot="operation" slot-scope="text" class="table-operation">
              <a href="javascript:;">Pause</a>
              <a href="javascript:;">Stop</a>
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item>
                    Action 1
                  </a-menu-item>
                  <a-menu-item>
                    Action 2
                  </a-menu-item>
                </a-menu>
                <a href="javascript:;"> More <a-icon type="down"/> </a>
              </a-dropdown>
            </span>
      </a-table>
    </f-form>
  </div>
</template>

<script>

  export default {
    name: 'OrderForm',
    props: {},
    data() {
      return {
        isAdd: true,
        loaded: false,
        orderDetailsData:[],
        innerColumns: [
          { title: '商品图', align: 'center', dataIndex: 'productImages', scopedSlots: { customRender: 'productImages' } },
          { title: '商品名称', dataIndex: 'productTitle',width:'400px' },
          { title: '单价', dataIndex: 'productPrice', scopedSlots: { customRender: 'status' } },
          { title: '数量', dataIndex: 'productNum' },
          { title: '金额', dataIndex: 'productAmount' }
        ],
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          discountAmount: 0,

        }
      },
      setData(data) {
        this.$refs.form.resetFields()
        if (data && data.orderId) {
          this.orderDetailsData = []
          this.http.get(this, {
            url: this.api.orderDetails.list,
            data: {
              params: {
                orderId: data.orderId
              }
            },
            success: function(me, data) {
              me.orderDetailsData = data
            }
          })
          this.$refs.form.getDetails({ orderId: data.orderId }, (data) => {
            this.formItem = data
            this.loaded = true
          })
          this.isAdd = false
        } else {
          this.formItem = this.getFormItem()
          this.loaded = true
        }
      },
      handleSubmit(callback) {
        this.$refs.form.submit({ proId: this.formItem.proId, cityId: this.formItem.cityId, areaId: this.formItem.areaId }, callback)
      }
    },
    created() {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
